<template>
  <div class="recharge-record">
    <div class="box-top">
      <el-form>
        <el-form-item label="账号">
            <el-input clearable placeholder="请输入账号" v-model="searchForm.account"></el-input>
        </el-form-item>
        <el-form-item label="金额类型">
          <el-select clearable v-model="searchForm.income_type" placeholder="请选择类型">
            <el-option v-for="(item, i) in incomeTypeList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="财务类型">
          <el-select clearable v-model="searchForm.finance_type" placeholder="请选择类型">
            <el-option v-for="(item, i) in financeTypeList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="searchForm.status" placeholder="请选择状态">
            <el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        <div class="base-money">
          <el-form-item label="总存款:">{{totalMoney.income}}分</el-form-item>
          <el-form-item label="总提款:">{{totalMoney.expend}}分</el-form-item>
        </div>
      </el-form>
    </div>
    <div class="box-mid">
       <el-button @click="handleExport">导出</el-button>
     </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column align="center" prop="account" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="pay_type" label="支付平台" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="agent_account" label="代理" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="income" label="存款金额" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="存款时间" prop="create_time" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="完成时间" prop="complete_time" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="状态" prop="status" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'RechargeRecord',
  data () {
    return {
      loading: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      statusList: [
        { value: 1, name: '完成' },
        { value: 2, name: '处理中' }
      ],
      financeTypeList: [
        { value: 1, name: '充值' },
        { value: 2, name: '提现' },
        { value: 3, name: '投注' },
        { value: 4, name: '奖金' }
      ],
      incomeTypeList: [
        { value: 1, name: '收入' },
        { value: 2, name: '支出' }
      ],
      searchForm: {
        account: '',
        status: '',
        finance_type: '',
        income_type: ''
      },
      tableData: [],
      totalMoney: {}
    }
  },
  created () {
    this.init()
    this.getTotalMoney().then(res => {
      this.totalMoney = res
    })
  },
  methods: {
    ...mapActions({
      getInitData: 'rechargeRecord/getInitData',
      getTotalMoney: 'rechargeRecord/getTotalMoney'
    }),
    handleExport () {
      const { status, account } = this.searchForm
      const params = {
        pageSize: this.pageSize,
        page: this.currentPage,
        status,
        income_type: this.searchForm.income_type,
        finance_type: this.searchForm.finance_type,
        account,
        type: 1
      }
      window.location.href = `${window.location.origin}/app/admin/download/download-l?${this.$pars(params)}`
    },
    init () {
      const { status, account } = this.searchForm
      const params = {
        pageSize: this.pageSize,
        page: this.currentPage,
        status,
        income_type: this.searchForm.income_type,
        finance_type: this.searchForm.finance_type,
        account
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { count, items } = res
        this.tableData = items
        this.total = count
      }).finally(() => {
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.searchForm = {
        account: '',
        income_type: '',
        finance_type: '',
        status: ''
      }
    }
  }
}
</script>
<style lang="less">
  .recharge-record {
    .base-money {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }
  }
</style>
